<!--
 * @Author: chunlai
 * @Date: 2024-11-21 09:24:02
 * @LastEditTime: 2024-11-21 11:32:31
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\form\components\premcount\LiabilityList2As.vue
 * @Description: 附加责任-多值单选
-->

<template>
  <div class="liability-module">
    <div
      class="field_duty_main"
      :class="forbidClick(dutyObj) ? 'forbid_choose' : ''"
      v-for="(dutyObj, dindex) in dutyList"
      :key="`${dutyObj.keyName}${dindex}`"
    >
      <div class="field2_label">
        <span class="label_name">
          {{ dutyObj.label }}
        </span>
        <FieldDescMode
          :label="dutyObj.label"
          :desc="dutyObj.explainImg"
          type="img"
          v-if="dutyObj.explainImg"
        />
      </div>
      <div class="label-em" v-if="dutyObj.desc" v-html="dutyObj.desc"></div>
      <div class="field2_label mt10" v-if="dutyObj.label2">
        <span class="label_name">
          {{ dutyObj.label2 }}
        </span>
      </div>
      <div class="label-em" v-if="dutyObj.desc2" v-html="dutyObj.desc2"></div>
      <div class="big_kind_box">
        <div class="li_item_box2 mt10">
          <span
            :class="sureClick(item2, dutyObj) ? 'active' : ''"
            v-for="(item2, idx3) in dutyObj.radioList"
            :key="`${dutyObj.keyName}_${item2.value}_${idx3}`"
            @click="changeDutyValue(dutyObj, item2)"
          >
            {{ item2.label }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FieldDescMode from "./FieldDescMode";
export default {
  name: "LiabilityList2As",
  props: {
    dutyList: {
      type: Array,
      default: () => [],
    },
    insuData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    FieldDescMode,
  },
  data() {
    return {};
  },
  computed: {
    apiKeyNames() {
      let res = {};
      if (this.insuData.apiKeyFields) {
        res = this.insuData.apiKeyFields;
      }
      return res;
    },
  },
  methods: {
    forbidClick(dutyObj) {
      let res = false;
      if (!this.apiKeyNames[`${dutyObj.keyName}`]) {
        res = true;
      }
      return res;
    },
    sureClick(item2, dutyObj) {
      let res = false;
      if (dutyObj.keyBtnName) {
        const keyValue = this.apiKeyNames[`${dutyObj.keyName}`],
          keyName = this.apiKeyNames[`${dutyObj.keyBtnName}`];
        res = item2[`${keyName}`] == keyValue;
      } else {
        res = item2.value == this.apiKeyNames[`${dutyObj.keyName}`];
      }
      return res;
    },
    changeDutyValue(dutyObj, item) {
      // console.log("changeDutyValue", dutyObj, item);
      let value = item.value;
      if (dutyObj.keyBtnName) {
        value = item[this.apiKeyNames[`${dutyObj.keyBtnName}`]];
      }
      let temObj = JSON.parse(JSON.stringify(this.apiKeyNames));
      temObj[`${dutyObj.keyName}`] = value;
      /* === === */
      if (dutyObj.keyName == "mjztemp") {
        if (temObj.mjztemp == "no") {
          temObj.mjz = "";
        } else {
          const list = JSON.parse(JSON.stringify(this.dutyList)),
            objMjz = list.find((ele) => ele.keyName == "mjz");
          // console.log(objMjz.radioList[0]);
          temObj.mjz = objMjz.radioList[0][value];
        }
      }
      if (dutyObj.keyName == "exzl") {
        if (temObj.exzl && temObj.exzl != "no") {
          temObj.ywtdyp = "";
          temObj.tdylqx = "";
        } else {
          temObj.ywtdyp = "no";
          temObj.tdylqx = "no";
        }
      }
      if (dutyObj.keyName == "ywtdyp") {
        if (temObj.ywtdyp) {
          if (temObj.ywtdyp == "no") {
            temObj.tdylqx = "";
            temObj.exzl = "no";
          } else {
            temObj.exzl = "";
            temObj.tdylqx = "no";
          }
        } else {
          temObj.exzl = "no";
        }
      }
      // console.log("changeDutyValue", temObj);
      this.updateApiField("apiKeyFields", temObj);
    },
    updateApiField(field, value) {
      // console.log("aaaa");
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: field,
        val: value,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.liability-module {
  margin-top: 12px;
}
.field_duty_main {
  margin-bottom: 6px;
  padding: 8px 4px 0;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  &.forbid_choose {
    background-color: #e1e1e1;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.1);
      z-index: 5;
    }
  }
}
.field2_label {
  display: flex;
  // align-items: center;
  .label_dot {
    width: 6px;
    height: 6px;
    background-color: #da251e;
    margin-right: 6px;
    margin-top: 6px;
  }
  .label_name {
    font-weight: 600;
    line-height: 26px;
    max-width: calc(100% - 40px);
  }
  .label_des {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    margin-top: 2px;
  }
}
.li_item_box2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23%;
    height: 32px;
    border-radius: 4px;
    color: #747474;
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7;
    margin-bottom: 10px;
    margin-right: 2%;

    &.active {
      color: #f54040;
      background-color: #fff0f0;
      border: 0.5px solid #f54040;
    }
  }
}
.label-em {
  color: #999999;
  font-size: 12px;
  font-style: normal;
  margin-top: 0;
}
</style>
